<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";

import SvgIcon from "@/components/SvgIcon.vue";
import NavRight from "@/components/NavRight.vue";

import { getRank } from "@/api/docs-api";
import {
  introduction,
  howToJoin,
  rule,
  prize,
  rank,
  navList,
} from "@/assets/language/debug-text";
import { ElLoading } from "element-plus";
import { dateHandle, globalVariable } from "@/stores/integral";

const showAll = ref(false);
const isExent = ref(false);
const showNav = ref(false);
const value = ref();
const currentDate = new Date();
let rankInfo = ref<rankData[]>([]);
let renderData = ref<rankData[]>([]);
const currentIndex = ref(0);
interface rankData {
  issue_author: string;
  badge: string;
  giteeRoom: string;
  issue_score: number;
  rank: number;
}
interface params {
  start: string;
  end: string;
}
// 图片动态路径处理

function getImageUrl(name: string) {
  return new URL(`../assets/docs-bug/${name}`, import.meta.url).href;
}

function showRank(params: params) {
  const loadingInstance = ElLoading.service({ fullscreen: true });
  getRank(params)
    .then((res) => {
      if (res.data.length) {
        let info: Array<rankData> = res.data;
        info.sort((a, b) => {
          return b.issue_score - a.issue_score;
        });
        info.forEach((item, index) => {
          item["giteeRoom"] = `https://gitee.com/${item.issue_author}`;
          item["rank"] = index + 1;
          // 9月活动结束评奖，之前不进行积分奖章展示
          if (currentDate.getMonth() + 1 > 8) {
            if (item.issue_score > 10 || item.issue_score === 10) {
              if (index === 0) {
                item["badge"] = "prize-1.png";
              } else if (index > 0 && index < 3) {
                item["badge"] = "prize-2.png";
              } else if (index > 2 && index < 6) {
                item["badge"] = "prize-3.png";
              }
            }
          }
          // 幸运奖奖章
          if (rank.luckyList.indexOf(item.issue_author) !== -1) {
            item["badge"] = "prize-5.png";
          }
          // 特殊贡献奖奖章
          if (rank.specialList.indexOf(item.issue_author) !== -1) {
            item["badge"] = "prize-4.png";
          }
        });
        rankInfo.value = info;
        if (info.length > 10) {
          showAll.value = true;
          renderData.value = rankInfo.value.slice(0, 10);
        } else {
          showAll.value = false;
          renderData.value = rankInfo.value;
        }
      } else {
        renderData.value = [];
      }
      loadingInstance.close();
    })
    .catch((err) => {
      loadingInstance.close();
      console.log(err);
    });
}

function showExtend() {
  if (isExent.value) {
    renderData.value = rankInfo.value.slice(0, 10);
  } else {
    renderData.value = rankInfo.value;
  }
  isExent.value = !isExent.value;
}

function scrollTop() {
  let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  if (scrollTop > 240 && scrollTop < 5439) {
    showNav.value = true;
  } else {
    showNav.value = false;
  }
  const jump = document.querySelectorAll(".do-jump") as NodeListOf<HTMLElement>;
  const topArr: Array<number> = [];
  for (let i = 0; i < jump.length; i++) {
    topArr.push(jump[i].offsetTop);
  }
  for (let i = 0; i < topArr.length; i++) {
    if (scrollTop <= topArr[i] - 200) {
      currentIndex.value = i;
      break;
    }
  }
}
// 切换月榜单和季度榜单排名
// function rankChange(index: number) {
//   rankTab.value = index;
//   index === 0
//     ? selectChange(currentDate.getMonth() + 1, index)
//     : selectChange(1, index);
//   value.value = rank.monthList[currentDate.getMonth()];
//   valueQuarter.value = rank.quarterList[1];
// }

// 获取日期天数
function selectChange(month: number) {
  showRank(dateHandle(month));
}

function scrollView(key: string) {
  (document.querySelector(`${key}`) as HTMLElement).scrollIntoView({
    block: "start",
    behavior: "smooth",
  });
}

onMounted(() => {
  window.addEventListener("scroll", scrollTop);
  if (currentDate.getMonth() > 7) {
    value.value = rank.monthList[3];
  } else {
    value.value = rank.monthList[currentDate.getMonth() - 5];
  }
  selectChange(currentDate.getMonth() + 1);
});

onUnmounted(() => {
  window.removeEventListener("scroll", scrollTop);
});
</script>

<template>
  <NavRight
    v-show="showNav"
    class="titlenav"
    :current-index="currentIndex"
    :data-list="navList"
    @click="scrollView"
  />
  <div class="out-banner">
    <div class="banner"></div>
  </div>
  <div class="main">
    <div class="warper">
      <div id="introduction" class="docs-introduction">
        <div class="introduction-left">
          <img class="web" src="/src/assets/docs-bug/introduction.png" />
        </div>
        <div class="introduction-right">
          <h2 class="introduction-title">{{ introduction.title }}</h2>
          <p class="paragraph">
            {{ introduction.paragraph }}
          </p>

          <div class="active-date">
            <p class="data-title">{{ introduction.activeDate }}</p>
            <p class="date">
              {{ introduction.date }}
            </p>
          </div>
          <p class="active-object">
            {{ introduction.activeObject }}
          </p>
          <p class="object-list">
            <a :href="globalVariable().docUrl" target="_blank">{{
              introduction.objectList[0]
            }}</a>
          </p>
          <p class="object-list">
            <a :href="globalVariable().blogUrl" target="_blank">{{
              introduction.objectList[1]
            }}</a>
          </p>
        </div>
      </div>
      <h2 id="join" class="title do-jump">{{ howToJoin.title }}</h2>
      <div class="how-to-join">
        <div class="join-main">
          <div class="join-left">
            <div class="join-left-img">
              <img src="/src/assets/docs-bug/join_left.png" />
            </div>
            <div class="join-left-text">
              <h3 class="join-title">{{ howToJoin.stepTitleOne }}</h3>
              <p class="join-paragraph">
                {{ howToJoin.stepFirst[0]
                }}<a :href="globalVariable().docUrl" target="_blank">{{
                  howToJoin.stepFirst[1]
                }}</a
                >{{ howToJoin.stepFirst[2]
                }}<a :href="globalVariable().blogUrl" target="_blank">{{
                  howToJoin.stepFirst[3]
                }}</a
                >{{ howToJoin.stepFirst[4] }}
              </p>
              <p class="join-paragraph">
                {{ howToJoin.stepTwoText }}
              </p>
              <p class="join-paragraph">
                {{ howToJoin.stepThreeText }}
              </p>
              <div class="join-paragraph">
                <p class="issue-four">{{ howToJoin.stepFourText[0] }}</p>
                <p>
                  {{ howToJoin.stepFourText[1]
                  }}<a
                    href="https://gitee.com/openlookeng/community/blob/master/guide_zh/guide.md#1issue%E5%88%9B%E5%BB%BA%E6%8C%87%E5%8D%97"
                    target="_blank"
                  >
                    {{ howToJoin.stepFourText[2] }}
                  </a>
                </p>
              </div>
            </div>
          </div>
          <div class="join-right">
            <div class="join-right-img">
              <img src="/src/assets/docs-bug/join_right.png" />
            </div>
            <div class="join-right-text">
              <h3 class="join-title">{{ howToJoin.stepTitleTwo }}</h3>
              <p class="join-paragraph">
                {{ howToJoin.stepTextOne }}
              </p>
              <p class="join-paragraph">
                {{ howToJoin.stepTextTwo[0] }}<br />
                <a
                  href="https://gitee.com/openlookeng/hetu-core/tree/master/hetu-docs"
                  target="_blank"
                  >{{ howToJoin.stepTextTwo[1] }}</a
                ><br />
                <a
                  href="https://gitee.com/openlookeng/website-v2/tree/master/app/zh/information/blog"
                  target="_blank"
                  >{{ howToJoin.stepTextTwo[2] }}</a
                ><br />
                <span class="tips">{{ howToJoin.stepTextTwo[3] }}</span>
              </p>
              <p class="join-paragraph">
                {{ howToJoin.stepTextThree[0] }}<br />
                {{ howToJoin.stepTextThree[1]
                }}<a
                  href="https://gitee.com/openlookeng/community/blob/master/guide_zh/guide.md#3-pr%E6%8F%90%E4%BA%A4%E6%8C%87%E5%8D%97"
                  target="_blank"
                  >{{ howToJoin.stepTextThree[2] }}</a
                >
              </p>
            </div>
          </div>
        </div>
      </div>
      <h2 id="rule" class="title do-jump">{{ rule.title }}</h2>
      <div class="rule-main">
        <div class="explain">
          <h3 class="explain-paragraph">{{ rule.secondTitle }}</h3>
          <h4 class="explain-title">{{ rule.secondDetail }}</h4>
          <p v-for="item in rule.explainList" :key="item">{{ item }}</p>
          <h4 class="important-note">{{ rule.hint }}</h4>
          <p v-for="item in rule.hintList" :key="item">{{ item }}</p>
        </div>
        <table border-collapse:collapse class="table">
          <tr class="table-title">
            <td v-for="item in rule.formTitle" :key="item">{{ item }}</td>
          </tr>
          <tr
            v-for="(item, index) in rule.formBody"
            :key="item.itemTitle"
            class="table-item"
          >
            <td class="order">{{ index + 1 }}</td>
            <td class="item-content">
              <div class="content-title">{{ item.itemTitle }}</div>
              <p
                v-for="item1 in item.itemList"
                :key="item1"
                class="integral-item"
              >
                {{ item1 }}
              </p>
            </td>
            <td class="integral-content">
              <p
                v-for="item2 in item.itemContent"
                :key="item2"
                :class="index === 5 ? 'explain-paragraph' : ''"
                class="integral-item"
              >
                {{ item2 }}
              </p>
            </td>
          </tr>
        </table>
        <h4 class="rule-note">{{ rule.formula }}</h4>
        <p>{{ rule.formulaText }}</p>
      </div>
      <div id="prize" class="prize do-jump">
        <div class="title">{{ prize.title }}</div>
        <div class="prize-box">
          <div
            v-for="item in prize.renderData"
            :key="item.id"
            class="prize-item"
          >
            <img
              class="prize-name"
              :src="getImageUrl(item.imgPath)"
              alt="prize"
            />
            <div class="prize-text">
              <p v-for="itemText in item.text" :key="itemText">
                {{ itemText }}
              </p>
            </div>
            <img
              class="prize-img"
              :src="getImageUrl(item.imgPrize)"
              alt="prize-img"
            />
          </div>
        </div>
        <div class="prize-special-box">
          <div
            v-for="item in prize.specialData"
            :key="item.id"
            class="prize-item"
          >
            <img :src="getImageUrl(item.imgPath)" alt="prize" />
            <div class="prize-text">
              <p v-for="itemText in item.text" :key="itemText">
                {{ itemText }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <h2 id="rank" class="title rankTitle do-jump">{{ rank.title }}</h2>
      <div class="rank do-jump">
        <div class="rank-head">
          <div class="switch-tab">
            <el-select
              v-model="value"
              class="m-2"
              :placeholder="rank.choiceMonth"
            >
              <el-option
                v-for="(item, index) in rank.monthList"
                :key="item"
                :value="item"
                @click="selectChange(index + 6)"
              />
            </el-select>
          </div>
          <div class="debug-button">
            <a :href="rank.debuggerLink" target="_blank">
              <div class="debug-detail detail1">{{ rank.debugDetail }}</div>
            </a>

            <a :href="rank.blogBugLink" target="_blank">
              <div class="debug-detail detail2">
                {{ rank.blogBugDetail }}
              </div></a
            >
          </div>
        </div>
        <table class="rank-body">
          <tr class="rank-first">
            <td v-for="item in rank.rankTitle" :key="item">{{ item }}</td>
          </tr>
          <tr v-for="item in renderData" :key="item.issue_author">
            <td>{{ item.rank }}</td>
            <td>
              <a :href="item.giteeRoom" target="_blank">{{
                item.issue_author
              }}</a>
            </td>
            <td>{{ item.issue_score }}</td>
            <td>
              <img v-if="item.badge" :src="getImageUrl(item.badge)" />
            </td>
          </tr>
        </table>
        <div v-if="renderData.length === 0" class="empty">{{ rank.empty }}</div>
        <div v-if="showAll" class="detail-box" @click="showExtend">
          <div v-show="!isExent" class="look-detail">
            {{ rank.extend }}
            <SvgIcon class="icon-extend" name="extend" />
          </div>
          <div v-show="isExent" class="look-detail">
            {{ rank.putAway }}
            <SvgIcon class="icon-extend put-away" name="extend" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@import "@/shared/styles/main.scss";
</style>
